<template>
	<div ref="pdom" class="cam-box" v-show="_showed">
		<div class="c-head">
			<label style="letter-spacing:2px">{{name}}</label>
			<div class="btn bclose" @click="call.stop()">Ｘ</div>
		</div>
		<div class="player">
			<ws-win ref="wsp" :realplay="realplay"></ws-win>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		nextTick,
		computed,
		reactive,
		watch,
		ref,
		toRefs
	} from "vue";

	import {
		useStore
	} from "vuex";

	import {
		ElMessage
	} from "element-plus";

	import cPlayer from "./ws-play.js";
	import wsWin from "./play.vue";

	const store = useStore();

	const emit =
		/*事件抛出
			//外层绑定@onFn="hOnFn"
		*/
		defineEmits(['onFn', 'onOpenAudio']),
		/*属性定义
			数据绑定v-bind:dat="dat"  
			const dat=ref({});
		*/
		props = defineProps({
			realplay: {
				type: String,
				default: null,
			}, //'ws://10.19.147.22:559/EUrl/q2jQie4';
			mode: {
				type: Number,
				default: 1,
			} //0：普通模式，1:高级模式
		});


	//播放句柄 
	const _showed = ref(false),
		name = ref("播放监控");


	const pdom = ref(null),
		wsp = ref(null);
	watch(_showed, s => {
		if (s) {
			pdom.value.style.transform = 'translate(-50%, -50%)'
		}
	});

	watch(props, pro => {
		if (pro.realplay) {
			_showed.value = true;
		}
	});

	const call = {
		play: (ws, txt) => {
			_showed.value = true;
			name.value = txt;
			wsp.value.call?.play(ws);
		},
		stop: () => {
			_showed.value = false;
			wsp.value.call?.stop();
		}
	}


	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		call
	});

	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	onUnmounted(() => {})
	onMounted(() => nextTick(() => {}));
</script>

<style scoped lang="scss">
	.cam-box {
		position: absolute;
		width: 700px;
		height: 500px;
		z-index: 99999;
		top: 50%;
		left: 50%;
		color: #eee;
		font-size: 20px;
		background-size: 100% 100%;
		transform: translate(-50%, -50%);
		pointer-events: all;
		background-image: url(/imgs/cam/cwinbg.png);


		.c-head {
			width: calc(100% - 133px);
    font-size: 19px;
    font-family: "";
    top: 0;
    height: 30px;
    display: flex
;
    color: #eee;
	background-color: #2D7049;
    z-index: 1;
    left: 30px;
    right: 20px;
    flex-direction: row;
    justify-content: space-between;
		}

		.bclose {
			height: 28px;
			width: 30px;
			background: rgba(30, 58, 88, 0.83);
			display: flex;
			justify-content: center;
			border: 1px solid #7e8795;
			// margin-right: 6px;
		}

		.bclose:hover {
			color: red;
			transform: scale(1.1);
		}

		.btn.b {
			font-size: 18px;
			position: absolute;
			width: calc(100% - 20px);
			height: 38px;
			right: 10px;
			bottom: 6px;

			line-height: 24px;

			background-image: url(/imgs/bg/btnb.png);
			background-size: 100% calc(100% + 2px);
			background-position: center;
			letter-spacing: 6px;
			color: #98E8FB;
			font-weight: bold;
		}

		.btn.b:hover {
			color: #04ff00;
		}

		label {
			font-size: 14px;
			line-height: 24px;
			letter-spacing: 1px;
			margin: 0 auto;
		}
	}

	.player {
		width: calc(100% - 133px);
    height: calc(100% - 170px);
    /* margin: 130px auto; */
    background-color: #222;
	}
</style>